<!DOCTYPE html>
<html lang="en">
<script src="http://dj.58cdn.com.cn/fe/jz/js/jquery-1.11.1.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<head>
    <meta charset="UTF-8">
    <title>设备信息列表</title>
    <link href="/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
    <style>
        #main-nav {
            margin-left: 1px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }

        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }

        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: center;
        }

        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }

        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }
    </style>


</head>
<body>
<div id="data" >请点击下面的按钮，通过 jQuery AJAX 改变这段文本。


</div>
<div class="navbar navbar-duomi navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/device/showAllDevice" id="logo">测试设备管理系统
            </a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li class="active">
                    <a href="showAllDevice">
                        <i class="glyphicon glyphicon-th-large"></i>
                        设备列表
                    </a>
                </li>
                <li>
                    <a href="/device/addDeviceUI">
                        <i class="glyphicon glyphicon-globe"></i>
                        新增设备
                    </a>
                </li>

                <li>
                    <a href="./charts.html">
                        <i class="glyphicon glyphicon-calendar"></i>
                        图表统计
                    </a>
                </li>
                <li>
                    <a href="#logSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-search"></i>
                        日志监控
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="logSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="logMonitoring"><i class="glyphicon glyphicon-eye-open"></i>JZT32日志监控</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>T.JZT日志监控</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>PASSPORT日志监控</a></li>
                    </ul>

                </li>
                <li>
                    <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        系统管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        关于系统
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-md-10">

            <div class="container">
                <div class="panel-heading">
                    测试设备展示列表:
                </div>

                <div id="searchForm">
                    设备名称:<input id="deviceName" type="deviceName" name="search_name"style="width:111px;height:25px" class="form-control input-sm" placeholder="">
                    &nbsp;&nbsp;&nbsp;&nbsp;系统:
                    <select id="OSSelector" name="search_os">
                        <option value="all" selected="">全部</option>
                        <option value="Android">Android</option>
                        <option value="IOS">IOS</option>
                    </select>

                    &nbsp;&nbsp;&nbsp;&nbsp;分组:
                    <select id="groupSelector" name="search_group">
                        <option value="all" selected="">全部</option>
                        <option value="平台-APP">平台-APP</option>
                        <option value="平台-新业务">平台-新业务</option>
                        <option value="平台-三方">平台-三方</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;&nbsp;保管人: <input type="owner" id = "owner" name="search_owner" style="width:111px;height:25px" class="form-control input-sm" placeholder="">
                    <button id="searchButton"class="btn btn-success" data-toggle="tooltip" type="button" onclick="queryForm()">查询</button>
                </div>

            </div>
            <div class="panel-body">
                <div class="dataTable_wrapper">

                    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                        <tr>
                            <th>设备名称</th>
                            <th>设备系统</th>
                            <th>系统版本</th>
                            <th>分辨率</th>
                            <th>资产编码</th>
                            <th>CPU个数</th>
                            <th>分组</th>
                            <th>保管人</th>
                            <th>    购买日期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <p id="tableMao"></p>

                        <tbody id="deviceTable">
                        #foreach($device in $devices)
                        <tr>
                            <input type="hidden" value="${device.id}" name="deviceId"/>
                            <td>${device.device_name}</td>
                            <td>${device.os}</td>
                            <td>${device.os_version}</td>
                            <td>${device.resolution}</td>
                            <td>${device.device_number}</td>
                            <td>${device.cpu}</td>
                            <td>${device.group_info}</td>
                            <td>${device.owner}</td>
                            <td>
                                <input class="form-control"  name="endTime" id="endTime" value="${device.date}" readonly="readonly">
                            </td>
                            <td>
                                <button class="btn btn-link btn-sm" type="button" onclick="loadViewStartPage('$!d.id')">查看</button>
                                <button class="btn btn-link btn-sm" type="button" onclick="loadEditDevicePage('${device.id}')">编辑</button>
                            </td>
                        </tr>
                        #end
                        </tbody>
                    </table>
                </div>
            </div>
    </div>
</div>
</div>
</body>
<script>
    function queryForm(){

        var search_name = $("#deviceName").val();
        var search_os = $("#OSSelector").val();
        var search_group = $("#groupSelector").val();
        var search_owner = $("#owner").val();

        $(document).ready(function(){
            $("#searchButton").click(function(){
                $("#data").load('searchDevice',{search_name:search_name,search_os:search_os,search_group:search_group,search_owner:search_owner}
                );
                alert("开始ajax");

            })
        })

        var data=$("#data").html();

        var txtHtml = '<tbody id="deviceTable">'+'#foreach($device in $data)'+"<tr>"+
                '<input type="hidden" value='+data.id+'name="deviceId"/>'+
                '<td>'+data.device_name+'</td>'+
                '<td>'+data.os


        $("#tableMao").append(txtHtml);

    }
    function loadAddDevicePage(){
        window.location.replace("/device/addDeviceUI");
    }
    function loadEditDevicePage(id){

        window.location.replace("/device/editDeviceUI?deviceId="+id);
    }
</script>
</html>